<body onload="animate()">
<script>
// Create a bunch of off-screen images, and pre-fetch the "frames"
// of the animation into them so that they're cached when we need them.
var aniframes = new Array(10);
for(var i = 0; i < 10; i++) {
    aniframes[i] = new Image();                 // Create an off-screen image
    aniframes[i].src = "images/" + i + ".jpg";  // Tell it what URL to load.
}

var frame = 0;         // The frame counter: keeps track of current frame.
var timeout_id = null; // Allows us to stop the animation with clearTimeout()

// This function performs the animation.  Call it once to start.
// Note that we refer to the on-screen image using its name attribute.
function animate() {
    document.i1.src = aniframes[frame].src; // Display the current frame
    document.i2.src = aniframes[(frame + 1)%10].src;
    document.i3.src = aniframes[(frame + 2)%10].src;
    document.i4.src = aniframes[(frame + 3)%10].src;; // Display the current frame
    frame = (frame + 1)%10;                        // Update the frame counter
    
    timeout_id = setTimeout("animate()", 500);     // Display next frame later.
}
</script>

<div id="gallery">
<img name="i1" src="images/0.jpg"  width="226" height="140">
<img name="i2" src="images/1.jpg"  width="226" height="140">
<img name="i3" src="images/2.jpg"  width="221" height="140">
<img name="i4" src="images/3.jpg"  width="221" height="140">
</div>
</body>
